<template>
  <el-dialog title="人员详情" v-model="dialogVisible" width="500px" append-to-body destroy-on-close>
    <div class="personnel-detail">
      <div class="detail-item">
        <span class="label">姓名：</span>
        <span class="value">{{ personnel.personnelName }}</span>
      </div>
      <div class="detail-item">
        <span class="label">人员编码：</span>
        <span class="value">{{ personnel.personnelCode || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">所属供应商：</span>
        <span class="value">{{ personnel.supplierName || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">职位：</span>
        <span class="value">{{ personnel.levelName }}</span>
      </div>
      <div class="detail-item">
        <span class="label">级别：</span>
        <span class="value">{{ getLevelLabel(personnel.level) }}</span>
      </div>
      <div class="detail-item">
        <span class="label">人月单价：</span>
        <span class="value">{{ formatAmount(personnel.monthlyRate) }}</span>
      </div>
      <div class="detail-item">
        <span class="label">联系电话：</span>
        <span class="value">{{ personnel.phoneNumber || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">电子邮箱：</span>
        <span class="value">{{ personnel.email || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">入职日期：</span>
        <span class="value">{{ personnel.entryDate || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">身份证号：</span>
        <span class="value">{{ personnel.idNumber || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">性别：</span>
        <span class="value">{{ getGenderLabel(personnel.gender) }}</span>
      </div>
      <div class="detail-item">
        <span class="label">出生日期：</span>
        <span class="value">{{ personnel.birthDate || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">手机号码：</span>
        <span class="value">{{ personnel.phoneNumber || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">离场日期：</span>
        <span class="value">{{ personnel.leaveDate || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">状态：</span>
        <span class="value">
          <el-tag :type="personnel.status === '0' ? 'success' : 'danger'">
            {{ personnel.status === "0" ? "在职" : "离职" }}
          </el-tag>
        </span>
      </div>
      <div class="detail-item">
        <span class="label">创建时间：</span>
        <span class="value">{{ personnel.createTime || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">更新时间：</span>
        <span class="value">{{ personnel.updateTime || "-" }}</span>
      </div>
      <div class="detail-item">
        <span class="label">备注：</span>
        <span class="value">{{ personnel.remark || "-" }}</span>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, watch } from "vue";
import { PersonnelVO } from "@/types/attendance/personnel";

export default defineComponent({
  name: "PersonnelDetail",
  props: {
    modelValue: {
      type: Boolean,
      required: true
    },
    personnel: {
      type: Object as PropType<PersonnelVO>,
      required: true
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const dialogVisible = ref(props.modelValue);

    // 职位选项
    const positionOptions = [
      { value: "0", label: "项目经理" },
      { value: "1", label: "架构师" },
      { value: "2", label: "开发工程师" },
      { value: "3", label: "测试工程师" },
      { value: "4", label: "运维工程师" },
      { value: "5", label: "产品经理" },
      { value: "6", label: "UI设计师" },
      { value: "9", label: "其他" }
    ];

    // 级别选项
    const levelOptions = [
      { value: "0", label: "初级" },
      { value: "1", label: "中级" },
      { value: "2", label: "高级" },
      { value: "3", label: "专家" }
    ];

    // 性别选项
    const genderOptions = [
      { value: "0", label: "男" },
      { value: "1", label: "女" },
      { value: "2", label: "未知" }
    ];

    // 获取职位标签
    const getPositionLabel = (position: string) => {
      const dict = positionOptions.find(item => item.value === position);
      return dict ? dict.label : "";
    };

    // 获取级别标签
    const getLevelLabel = (level: string) => {
      const dict = levelOptions.find(item => item.value === level);
      return dict ? dict.label : "";
    };

    // 获取性别标签
    const getGenderLabel = (gender: string) => {
      const dict = genderOptions.find(item => item.value === gender);
      return dict ? dict.label : "";
    };

    // 金额格式化
    const formatAmount = (amount: number | undefined) => {
      if (amount === undefined) return "-";
      return `¥${amount.toLocaleString("zh-CN", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })}`;
    };

    // 监听visible变化
    watch(
      () => props.modelValue,
      val => {
        dialogVisible.value = val;
      }
    );

    // 监听dialogVisible变化
    watch(
      () => dialogVisible.value,
      val => {
        emit("update:modelValue", val);
      }
    );

    // 关闭对话框
    const handleClose = () => {
      dialogVisible.value = false;
    };

    return {
      dialogVisible,
      getPositionLabel,
      getLevelLabel,
      getGenderLabel,
      formatAmount,
      handleClose
    };
  }
});
</script>

<style lang="scss" scoped>
.personnel-detail {
  padding: 10px;

  .detail-item {
    display: flex;
    margin-bottom: 15px;

    .label {
      width: 100px;
      font-weight: 600;
      color: #606266;
    }

    .value {
      flex: 1;
      color: #303133;
      word-break: break-all;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
